import { HeaderNav } from "../home/index.tsx";
import styles from "./index.module.css";
import { useEffect, useState } from "react";
import { SafetyCertificateFilled, ContactsFilled, SignatureFilled, HeartFilled, ProjectFilled } from '@ant-design/icons';
import { Avatar, Form, Input, ConfigProvider, Button, message } from "antd";
import { UserOutlined } from '@ant-design/icons';
import updatePng from "../../static/update.png";
import { updatePassword } from "../../api/login";
import { selectByMemberId } from "../../api/member.ts";
import { postByUserId } from "../../api/post";
import { data } from "react-router-dom";
import dayjs from "dayjs";
function User() {
    const [clickMenu, setClickMenu] = useState(1);
    return (
        <div className="bodyContent">
            <HeaderNav title="个人中心" />
            {bodyHome(clickMenu, setClickMenu)}
        </div>
    )
}


function bodyHome(clickMenu: number, setClickMenu: (clickMenu: number) => void) {
    return (
        <div className={styles.bodyContent}>
            {bodyHomeLeft(clickMenu, setClickMenu)}
            {bodyHomeRight(clickMenu)}
        </div>
    )
}

// menu菜单栏
function bodyHomeLeft(clickMenu: number, setClickMenu: (clickMenu: number) => void) {
    const menuList = [
        { key: 1, title: "个人信息", icon: <ContactsFilled /> },
        { key: 2, title: "我的帖子", icon: <SignatureFilled /> },
        { key: 3, title: "我的收藏", icon: <HeartFilled /> },
        { key: 4, title: "加入的吧", icon: <ProjectFilled /> },
        { key: 5, title: "发布帖子", icon: <SignatureFilled /> },
        { key: 6, title: "账号安全", icon: <SafetyCertificateFilled /> },
    ];


    return (
        <div className={styles.bodyHomeLeft}>
            {menuList.map((item) => (
                <div key={item.key} className={`${styles.menuItem} ${clickMenu === item.key ? styles.active : ""}`}
                    onClick={() => {
                        setClickMenu(item.key);
                    }}>
                    {item.icon}
                    {item.title}
                </div>
            ))}
        </div>
    )
}

function bodyHomeRight(clickMenu: number) {
    return (
        <div className={styles.bodyHomeRight}>
            {clickMenu === 1 && <BodyHomeRight1 />}
            {clickMenu === 2 && <BodyHomeRight2 />}
            {clickMenu === 3 && <BodyHomeRight3 />}
            {clickMenu === 4 && <BodyHomeRight4 />}
            {clickMenu === 5 && <BodyHomeRight5 />}
            {clickMenu === 6 && <BodyHomeRight6 />}
        </div>
    )
}

function BodyHomeRight1() {

    const userForm = JSON.parse(localStorage.getItem('user') || '{}');

    return (
        <div className='flexColumn'>
            <Avatar size={100} icon={<UserOutlined />} style={{ marginTop: "10px" }} />
            <div className={styles.userInfoText}>
                <div className={styles.userInfoTextTitle}>基本信息</div>
                <div className={styles.userInfoTextItem}>
                    <ConfigProvider theme={{
                        components: {
                            Form: {
                                labelColor: 'white',
                            },
                            Input: {
                                colorBgContainer: 'rgba(0,0,0,0)',
                                colorBorder: 'rgb(255, 255, 255)',
                                colorText: 'white',
                                colorTextDisabled: 'white',
                                activeBg: 'rgba(0,0,0,0.2)',
                            }
                        }
                    }}>
                        <Form labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{ marginTop: "10px" }}>
                            <Form.Item label="昵称">
                                <Input value={userForm.nickname} />
                            </Form.Item>
                            <Form.Item label="性别">
                                <Input value={userForm.gender === 1 ? "男" : "女"} disabled />
                            </Form.Item>
                            <Form.Item label="手机号">
                                <Input value={userForm.phone} />
                            </Form.Item>
                            <Form.Item label="邮箱">
                                <Input value={userForm.email} />
                            </Form.Item>
                            <Form.Item label="出生年月">
                                <Input value={userForm.birthDate} />
                            </Form.Item>
                            <Form.Item label="地址">
                                <Input value={userForm.address} />
                            </Form.Item>
                        </Form>
                    </ConfigProvider>
                </div>
            </div>
            <div className={styles.userInfoText}>
                <div className={styles.userInfoTextTitle}>身份信息</div>
                <div className={styles.userInfoTextItem}>
                    <ConfigProvider theme={{
                        components: {
                            Form: {
                                labelColor: 'white'
                            },
                            Input: {
                                colorBgContainer: 'rgba(0,0,0,0)',
                                colorBorder: 'rgb(255, 255, 255)',
                                colorText: 'white',
                                colorTextDisabled: 'white',
                                activeBg: 'rgba(0,0,0,0.2)',
                            }
                        }
                    }}>
                        <Form labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{ marginTop: "10px" }}>
                            <Form.Item label="姓名">
                                <Input value={userForm.realName} />
                            </Form.Item>
                            <Form.Item label="身份证">
                                <Input value={userForm.idCard} />
                            </Form.Item>
                        </Form>
                    </ConfigProvider>
                </div>
            </div>
        </div>
    )
}

function BodyHomeRight2() {
    const userForm = JSON.parse(localStorage.getItem('user') || '{}');
    const [postList, setPostList] = useState<any[]>([]);
    useEffect(() => {
        postByUserId(userForm.userId).then(res => {
            setPostList(res.data);
        })
    }, [userForm.userId])
    return (
        <div>
            <div className={styles.userInfoTextTitle}>
                我的帖子
            </div>
            
            <div>
                {
                    postList.map((item) => (
                        <div key={item.postId} className={styles.userPostCard}>
                            <p>标题：{item.postTitle}</p>
                            <p>发布时间：{dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')}</p>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

function BodyHomeRight3() {
    return (
        <div>
            我的收藏
        </div>
    )
}

function BodyHomeRight4() {

    const [memberList, setMember] = useState<any[]>([]);
    const userForm = JSON.parse(localStorage.getItem('user') || '{}');
    const imgUrl = process.env.PUBLIC_UPLOAD_URL;

    useEffect(() => {
        selectByMemberId(userForm.userId).then(res => {
            setMember(res.data);
        })
    }, [userForm.userId])
    
    console.log(memberList);
    
    return (
        <div>
            <div className={styles.userInfoTextTitle}>
                <div>已加入的贴吧</div>
            </div>
            {
                memberList.map((item) => (
                    <div key={item.forumId} className={styles.userForumCard}>
                        <div style={{display: "flex",gap:"10px",alignItems:"center"}}>
                            <Avatar src={imgUrl + item.forum.avatar} size={50}></Avatar>
                            <p>{item.forum.forumName}</p>
                        </div>
                        <p>身份：{item.role == 0 ? "管理员" : "普通用户"}</p>
                    </div>
                ))
            }
        </div>
    )
}

function BodyHomeRight5() {
    const handleFinish = (values: any) => {

    }
    type PostForm = {
        forumId: number;
        userId: number;
        category: string;
        postTitle: string;
        postImage: string;
        postContent: string;
    }
    return (
        <div>
            <div className={styles.userInfoTextTitle}>
                <div>发布帖子</div>
            </div>

            <div>
                <ConfigProvider theme={{
                            components: {
                                Form: {
                                    labelColor: 'white'
                                },
                                Input: {
                                    colorBgContainer: 'rgba(0,0,0,0)',
                                    colorBorder: 'rgb(255, 255, 255)',
                                    colorText: 'white',
                                    colorTextDisabled: 'white',
                                }   
                            }
                        }}>
                    <Form<PostForm> onFinish={handleFinish} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{ marginTop: "10px" }}>
                        {/* <Form.Item name="forumId" label="贴吧标题">
                            <Input.Password placeholder="请输入贴吧昵称"/>
                        </Form.Item> */}
                        {/* <Form.Item name="userId" label="用户ID">
                            <Input.Password placeholder="请输入用户ID"/>
                        </Form.Item> */}
                        <Form.Item name="category" label="分类">
                            <Input.Password placeholder="请输入分类"/>
                        </Form.Item>
                        <Form.Item name="postTitle" label="标题">
                            <Input.Password placeholder="请输入标题"/>
                        </Form.Item>
                        {/* <Form.Item name="postImage" label="图片">
                            <Input.Password placeholder="请输入图片"/>
                        </Form.Item> */}
                        <Form.Item name="postContent" label="内容">
                            <Input.Password placeholder="请输入内容"/>
                        </Form.Item>
                        <div style={{display: "flex", justifyContent: "center",gap:"20px"}}>
                            <Button type="primary" htmlType="submit" style={{ marginRight: '10px' }}>确认发布</Button>
                            <Button type="primary" htmlType="reset">重置输入</Button>
                        </div>
                    </Form>
                </ConfigProvider>
            </div>
        </div>
    )
}

function BodyHomeRight6() {
    const [messageApi, messageContextHolder] = message.useMessage()
    type LoginForm = {
        oldPassword: string;
        newPassword: string;
        confirmPassword: string;
    }

    let userForm = JSON.parse(localStorage.getItem('user') || '{}');

    const handleFinish = async (values: LoginForm) => {
        console.log(values);

        console.log(userForm);
        
        if(values.newPassword !== values.confirmPassword){
            messageApi.error("两次密码不一致");
            return;
        }

        let {msg,code} = await updatePassword({
            account :userForm.account,
            password:values.oldPassword,
            newPassword:values.confirmPassword
        })
        if(code == 200) messageApi.success(msg);
    }

    return (
        
        <div className='flexColumn'>
            {messageContextHolder}
            <div className='flexRow' style={{boxSizing: "border-box",padding:"10px",gap:"10px"}}>
                <img src={updatePng} style={{ width: "100px"}} alt="" />
                <div style={{ fontSize: "30px", fontWeight: "1000"}}>
                    请妥善保管密码，不要泄露给他人哦
                </div>
            </div>

            <div className={styles.userInfoText}>
                <div className={styles.userInfoTextTitle}>
                    <div>修改密码</div>
                </div>
                <div className={styles.userInfoTextItem}>
                    <ConfigProvider theme={{
                        components: {
                            Form: {
                                labelColor: 'white'
                            },
                            Input: {
                                colorBgContainer: 'rgba(0,0,0,0)',
                                colorBorder: 'rgb(255, 255, 255)',
                                colorText: 'white',
                                colorTextDisabled: 'white',
                            }   
                        }
                    }}>
                        <div>
                            <Form<LoginForm> onFinish={handleFinish} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{ marginTop: "10px" }}>
                                <Form.Item name="oldPassword" label="旧密码">
                                    <Input.Password placeholder="请输入旧密码"/>
                                </Form.Item>
                                <Form.Item name="newPassword" label="新密码">
                                    <Input.Password placeholder="请输入新密码"/>
                                </Form.Item>
                                <Form.Item name="confirmPassword" label="确认密码">
                                    <Input.Password placeholder="请确认密码"/>
                                </Form.Item>
                                <div style={{display: "flex", justifyContent: "center",gap:"20px"}}>
                                    <Button type="primary" htmlType="submit" style={{ marginRight: '10px' }}>确认修改</Button>
                                    <Button type="primary" htmlType="reset">重置输入</Button>
                                </div>
                            </Form>
                        </div>
                    </ConfigProvider>
                </div>
            </div>
        </div>
    )
}

export default User;
